<template>
  <h1>员工列表练习</h1>
  <hr>
  <input type="text" placeholder="请输入员工姓名" v-model="e.name">
  <input type="text" placeholder="请输入员工工资" v-model="e.salary">
  <input type="text" placeholder="请输入员工岗位" v-model="e.job">
  <hr>
  <button @click="add()">点我添加</button>
  <hr>

  <table border="1px">
    <tr>
      <th>编号</th>
      <th>员工姓名</th>
      <th>员工工资</th>
      <th>员工岗位</th>
    </tr>

    <tr v-for="(item, index) in emp">
      <td>{{ index + 1 }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.salary }}</td>
      <td>{{ item.job }}</td>
    </tr>

  </table>
</template>

<script setup>
import {ref} from 'vue'

const emp = ref([
      {name: '张三', salary: 1000, job: '前端工程师'},
      {name: '李四', salary: 1000, job: '后端工程师'},
      {name: '王五', salary: 1000, job: 'UI工程师'}
    ]
)
// 创建一个对象
const e = ref({name: '', salary: '', job: ''})
const add = () => {
  // emp.value.push({name: name.value, salary: salary.value, job: job.value})
  //创建一个临时变量 便于加入一个新的员工
  let newEmp = {
    name: e.value.name,
    salary: e.value.salary,
    job: e.value.job
  };
  emp.value.push(newEmp)
  e.value = {name: '', salary: '', job: ''}
}

</script>

<style scoped>

</style>